import { useState } from 'react'
import "./index.model.css"
import { Button } from 'antd';
export default function TabszaiTu() {
    const [selectFilters, setFiltersId] = useState('全部');
    //tabs切换s数据

    const handleFilterClick = (filterName: string) => {
        setFiltersId(filterName);
    }

    const filters = [
        { name: '全部', count: 10 },
        { name: '已确认', count: 5 },
        { name: '未确认', count: 3 },
        { name: '异常', count: 2 },
    ];
    return (
        <div className='box'>
            {/* tabs切换 */}
            <div className="filter-container">
                {filters.map((filter, index) => (
                    <div key={index} className={`filter-item ${selectFilters === filter.name ? 'active' : ''}`} onClick={() => handleFilterClick(filter.name)} >
                        <span className="filter-name">{filter.name}</span>
                        <span className='filter-count'>({filter.count})</span>
                    </div>
                ))}
            </div>

            <Button style={{ width: '100px', height: "40px" }} type="primary">
                回单确认
            </Button>
        </div>
    )
}
